<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="./js/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="./css/elementUI.css" />
    <link rel="stylesheet" href="./css/userInfo.css" />
    <link rel="stylesheet" href="./css/iconfont.css" />
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <title>个人中心页面</title>
  </head>
  <body>
    <div id="hjx-app" v-loading.fullscreen.lock="loading">
      <div class="userInfo">
        <div class="userInfo-left">
          <div class="avatar">
            <img :src="userInfo.headPortrait" alt="" />
          </div>
          <div class="info">
            <div class="name">{{userInfo.name}}</div>
            <div class="des">个人介绍：{{userInfo.introduce}}</div>
          </div>
        </div>
        <div class="userInfo-right">
          <a href="" v-if="loginUser.id === userInfo.id"> 编辑个人资料 </a>
          <div v-else>
            <el-button
              type="warning"
              v-if="userInfo.isFollow"
              @click="handleFollow(userInfo)"
              >已关注</el-button
            >

            <el-button type="warning" v-else @click="handleFollow(userInfo)"
              >点击关注</el-button
            >
          </div>
        </div>
      </div>
      <div class="tabs">
        <div
          class="tab"
          :class="activeName === 'article'?'active':''"
          @click="handleClick('article')"
        >
          我的文章
        </div>
        <div
          class="tab"
          :class="activeName === 'collect'?'active':''"
          @click="handleClick('collect')"
        >
          收藏
        </div>
        <div
          class="tab"
          :class="activeName === 'thumbs'?'active':''"
          @click="handleClick('thumbs')"
        >
          点赞
        </div>
        <div
          class="tab"
          :class="activeName === 'follow'?'active':''"
          @click="handleClick('follow')"
        >
          关注
        </div>
        <div
          class="tab"
          :class="activeName === 'history'?'active':''"
          @click="handleClick('history')"
          v-if="loginUser.id === userInfo.id"
        >
          记录
        </div>
      </div>
      <!-- 文章 -->
      <div class="content" v-if="activeName === 'article'">
        <template v-if="articleList.length">
          <div class="articleList" v-for="item in articleList" :key="item.id">
            <div class="userInfo">
              <div class="avatar">
                <a href="#">
                  <img :src="item.userInfo.headPortrait" alt="" />
                </a>
              </div>
              <div class="name">
                <a href="#">{{item.userInfo.name}}</a> 发布了文章
              </div>
              <div class="time">{{item.writeTime}}</div>
            </div>
            <div class="article">
              <div class="cover">
                <a href="">
                  <img :src="item.cover" alt="" />
                </a>
              </div>
              <div class="info">
                <div class="title">
                  <a href="">{{item.title}}</a>
                </div>
                <div class="des">{{item.des}}</div>
                <div class="tag">
                  <el-tag>{{item.groupid}}</el-tag>
                </div>
                <div class="cz">
                  <div class="li">
                    <i class="iconfont icon-liulanliang"></i>
                    {{item.browse}}浏览量
                  </div>
                  <div class="li" :class="item.isThumbs?'active':''">
                    <i class="iconfont icon-dianzan"></i>
                    {{item.thumbs}}点赞
                  </div>
                  <div class="li">
                    <i class="iconfont icon-31pinglun"></i>
                    {{item.commens}}评论
                  </div>
                  <div class="li" :class="item.isCollect?'active':''">
                    <i class="iconfont icon-shoucang"></i>
                    {{item.collect}}收藏
                  </div>
                </div>
              </div>
            </div>
            <el-divider></el-divider>
          </div>
        </template>
        <template v-else>
          <el-empty description="暂无数据"></el-empty>
        </template>
      </div>
      <!-- 收藏 -->
      <div class="content" v-else-if="activeName === 'collect'">
        <template v-if="collectList.length">
          <div class="articleList" v-for="item in collectList" :key="item.id">
            <div class="userInfo">
              <div class="avatar">
                <img :src="item.userInfo.headPortrait" alt="" />
              </div>
              <div class="name">{{item.userInfo.name}} 收藏了文章</div>
              <div class="time">{{item.writeTime}}</div>
            </div>
            <div class="article">
              <div class="cover">
                <a href="">
                  <img :src="item.cover" alt="" />
                </a>
              </div>
              <div class="info">
                <div class="title">
                  <a href="">{{item.title}}</a>
                </div>
                <div class="des">{{item.des}}</div>
                <div class="tag">
                  <el-tag>{{item.groupid}}</el-tag>
                </div>
                <div class="cz">
                  <div class="li">
                    <i class="iconfont icon-liulanliang"></i>
                    {{item.browse}}浏览量
                  </div>
                  <div class="li" :class="item.isThumbs?'active':''">
                    <i class="iconfont icon-dianzan"></i>
                    {{item.thumbs}}点赞
                  </div>
                  <div class="li">
                    <i class="iconfont icon-31pinglun"></i>
                    {{item.commens}}评论
                  </div>
                  <div class="li" :class="item.isCollect?'active':''">
                    <i class="iconfont icon-shoucang"></i>
                    {{item.collect}}收藏
                  </div>
                </div>
              </div>
            </div>
            <el-divider></el-divider>
          </div>
        </template>
        <template v-else>
          <el-empty description="暂无数据"></el-empty>
        </template>
      </div>
      <!-- 点赞 -->
      <div class="content" v-else-if="activeName === 'thumbs'">
        <template v-if="thumbsList.length">
          <div class="articleList" v-for="item in thumbsList" :key="item.id">
            <div class="userInfo">
              <div class="avatar">
                <img :src="item.userInfo.headPortrait" alt="" />
              </div>
              <div class="name">{{item.userInfo.name}} 点赞了文章</div>
              <div class="time">{{item.writeTime}}</div>
            </div>
            <div class="article">
              <div class="cover">
                <a href="">
                  <img :src="item.cover" alt="" />
                </a>
              </div>
              <div class="info">
                <div class="title">
                  <a href="">{{item.title}}</a>
                </div>
                <div class="des">{{item.des}}</div>
                <div class="tag">
                  <el-tag>{{item.groupid}}</el-tag>
                </div>
                <div class="cz">
                  <div class="li">
                    <i class="iconfont icon-liulanliang"></i>
                    {{item.browse}}浏览量
                  </div>
                  <div class="li" :class="item.isThumbs?'active':''">
                    <i class="iconfont icon-dianzan"></i>
                    {{item.thumbs}}点赞
                  </div>
                  <div class="li">
                    <i class="iconfont icon-31pinglun"></i>
                    {{item.commens}}评论
                  </div>
                  <div class="li" :class="item.isCollect?'active':''">
                    <i class="iconfont icon-shoucang"></i>
                    {{item.collect}}收藏
                  </div>
                </div>
              </div>
            </div>
            <el-divider></el-divider>
          </div>
        </template>
        <template v-else>
          <el-empty description="暂无数据"></el-empty>
        </template>
      </div>
      <!-- 关注 -->
      <div class="content" v-else-if="activeName === 'follow'">
        <template v-if="followList.length">
          <div class="followList" v-for="item in followList" :key="item.id">
            <div class="follow-center">
              <div class="userInfo">
                <div class="avatar">
                  <a href="#">
                    <img :src="item.headPortrait" alt="" />
                  </a>
                </div>
                <div class="name">
                  <a href="#">{{item.name}}</a>
                </div>
              </div>
              <div class="follow">
                <el-button
                  type="warning"
                  v-if="!item.isFollow"
                  @click="handleFollow(item)"
                  >+ 关注</el-button
                >
                <el-button type="success" v-else @click="handleFollow(item)"
                  >已关注</el-button
                >
              </div>
            </div>
            <el-divider></el-divider>
          </div>
        </template>
        <template v-else>
          <el-empty description="暂无数据"></el-empty>
        </template>
      </div>
      <!-- 记录 -->
      <div class="content" v-else-if="activeName === 'history'">
        <template v-if="historyList.length">
          <div class="articleList" v-for="item in historyList" :key="item.id">
            <div class="userInfo">
              <div class="avatar">
                <img :src="item.userInfo.headPortrait" alt="" />
              </div>
              <div class="name">{{item.userInfo.name}} 浏览了文章</div>
              <div class="time">{{item.writeTime}}</div>
            </div>
            <div class="article">
              <div class="cover">
                <a href="">
                  <img :src="item.cover" alt="" />
                </a>
              </div>
              <div class="info">
                <div class="title">
                  <a href="">{{item.title}}</a>
                </div>
                <div class="des">{{item.des}}</div>
                <div class="tag">
                  <el-tag>{{item.groupid}}</el-tag>
                </div>
                <div class="cz">
                  <div class="li">
                    <i class="iconfont icon-liulanliang"></i>
                    {{item.browse}}浏览量
                  </div>
                  <div class="li" :class="item.isThumbs?'active':''">
                    <i class="iconfont icon-dianzan"></i>
                    {{item.thumbs}}点赞
                  </div>
                  <div class="li">
                    <i class="iconfont icon-31pinglun"></i>
                    {{item.commens}}评论
                  </div>
                  <div class="li" :class="item.isCollect?'active':''">
                    <i class="iconfont icon-shoucang"></i>
                    {{item.collect}}收藏
                  </div>
                </div>
              </div>
            </div>
            <el-divider></el-divider>
          </div>
        </template>
        <template v-else>
          <el-empty description="暂无数据"></el-empty>
        </template>
      </div>
      <!-- 展示更多 -->
      <el-button type="primary" v-if="isNext" @click="handleMore"
        >展示更多</el-button
      >
    </div>
    <script>
      new Vue({
        el: '#hjx-app',
        data: {
          // 当前登录的用户
          loginUser: {
            id: 1,
            name: '崔亚洲',
            headPortrait: 'https://v2.cn.vuejs.org/images/logo.svg',
          },
          // 当前查看的用户信息
          userInfo: {
            id: 1,
            name: '崔亚洲',
            headPortrait: 'https://v2.cn.vuejs.org/images/logo.svg',
            introduce:
              '这是个人介绍介绍这是个人介绍介绍这是个人介绍介绍这是个人介绍介绍这是个人介绍介绍这是个人介绍介绍这是个人介绍介绍这是个人介绍介绍这是个人介绍介绍这是个人介绍介绍这是个人介',
            isFollow: true, // 是否关注用户
          },
          activeName: 'article',
          loading: false,
          pageSize: 10, // 每页展示的个数
          // 我的文章
          articleList: [],
          // 收藏列表
          collectList: [],
          // 点赞列表
          thumbsList: [],
          // 关注列表
          followList: [],
          // 记录列表
          historyList: [],
          isNext: false, // 是否显示展示更多
          // 请求地址
          requestUrl: {
            // 前四
            more: 'https://www.baidu111.com',
            // 记录
            history: 'https://www.baidu.com',
          },
        },
        methods: {
          handleClick: function (tab) {
            this.activeName = tab
          },
          // 关注和取消关注
          handleFollow: function (item) {
            console.log('关注', item)
          },
          // 加载更多
          handleMore: function () {
            this.getData(this.activeName)
          },
          // 请求数据
          getData: function (newVal) {
            this.loading = true
            axios
              .get(this.requestUrl[newVal === 'history' ? 'history' : 'more'], {
                params: {
                  num: this.pageSize,
                  type: newVal,
                  offset: this[`${newVal}List`].length,
                },
              })
              .then(res => {
                if (res.data.data.lists <= this.pageSize) {
                  this.isNext = false
                } else {
                  this.isNext = true
                }
                if (newVal === 'article') {
                  this.articleList = this.articleList.concat(
                    res.data.data.lists
                  )
                } else if (newVal === 'collect') {
                  this.collectList = this.collectList.concat(
                    res.data.data.lists
                  )
                } else if (newVal === 'thumbs') {
                  this.thumbsList = this.thumbsList.concat(res.data.data.lists)
                } else if (newVal === 'follow') {
                  this.followList = this.followList.concat(res.data.data.lists)
                } else if (newVal === 'history') {
                  this.historyList = this.historyList.concat(
                    res.data.data.lists
                  )
                }
              })
              .finally(() => {
                this.loading = false
              })
          },
        },
        watch: {
          activeName: {
            handler: function (newVal) {
              this.getData(newVal)
            },
            immediate: true,
          },
        },
      })
    </script>
  </body>
</html>
